<!--
 * @Author: zhangzhen
 * @Date: 2022-10-21 09:36:12
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-04-23 10:10:43
 * 
-->
<template>
  <div>
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <h1>{{ a }}</h1>
    <h1>我是父组件传值：{{ props.msg }}</h1>

    <hr />

    <h1>pinia:{{ name }}</h1>
    <h1>pinia:{{ age }}</h1>
    <h1>pinia.getter:{{ state.getterName }}</h1>
    <el-button type="primary" @click="changeName">修改pinia</el-button>
  </div>
</template>

<script setup>
import { reactive, inject } from "vue";
import { stateStore } from "../store/state";
//结构store
import { storeToRefs } from "pinia";
const state = stateStore();
const { age, name } = storeToRefs(state);

const obj = reactive({ name: "zs", age: 18 });
// 跨组件传值
const a = inject("provide");
// 获取props
const props = defineProps({
  msg: String,
});
console.log("props: ", props.msg);

const changeName = () => {
  // 通过patch修改数据两种方式对象和函数
  // 1、对象
  //   state.$patch({
  //     name: "西瓜",
  //     age: 100,
  //   });
  // 2、函数
  //   state.$patch((state) => {
  //     state.name = "哈密瓜";
  //     state.age = 999;
  //   });

  // 通过action修改数据
  state.updateName("香蕉", 88);
  // state.asyncfun();
};
</script>

<style lang="less" scoped></style>
